<template>
  <div>
    <el-select
      v-model="value"
      placeholder="Select"
      style="width: 240px"
      :collapse-tags="false"
      :multiple="false"
      :remote="false"
      :filterable="false"
      :clearable="false"
      :show-pagination="false"
    >
      <el-option
        v-for="item in paginatedCities"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <template #footer>
        <div style="display: flex; justify-content: center">
          <el-pagination
            @current-change="handlePageChange"
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total"
            style="text-align: center; padding: 8px 0"
          />
        </div>
      </template>
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import type { CheckboxValueType } from 'element-plus'

const value = ref<CheckboxValueType[]>([])

const cities = ref([
  { value: 'Beijing', label: 'Beijing' },
  { value: 'Shanghai', label: 'Shanghai' },
  { value: 'Nanjing', label: 'Nanjing' },
  { value: 'Chengdu', label: 'Chengdu' },
  { value: 'Shenzhen', label: 'Shenzhen' },
  { value: 'Guangzhou', label: 'Guangzhou' }
])

// 每页显示几个
const pageSize = 4
const currentPage = ref(1)

const total = computed(() => cities.value.length)

const paginatedCities = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return cities.value.slice(start, start + pageSize)
})

const handlePageChange = (page: number) => {
  currentPage.value = page
}
</script>

<style lang="scss" scoped>
.option-input {
  width: 100%;
  margin-bottom: 8px;
}
</style>
